<template>
	<view class="box">
		<view class="header">
			<view class="iconfont icon-fanhui" @click="fanhui">返回</view>
			<view class="">历史水量统计</view>
		</view>
		<view class="ddd">
			<view :class=" tibj==1?'active' :'' " @click="dianji(1)">月度统计</view>
			<view :class="  tibj==2?'active': '' " @click="dianji(2)">年度统计</view>
			<view :class="  tibj==3?'active':''  " @click="dianji(3)">水表统计</view>
		</view>
		<view class="" v-if=" tibj==1 ">
			<view class="tlt">地下水用水量</view>
			<picker mode="date" fields="year" :value="anzhuang1" start="2015-09-01" end="2025-09-01"
			data-tt='地下水' 	@change="bindDateChange"  >
				<input class="weui-input" type="number" :value="anzhuang1" placeholder="2022" />
			</picker>


			<view class="charts-box" style="height: 400px;">
				<qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},
				     {position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'}
				      ]}}" :chartData="chartsDataMix1" />
			</view>

			<view class="tlt"> 自来水用水量</view>

			<picker mode="date"  fields="year" :value="anzhuang2" start="2015-09-01" end="2025-09-01"
			data-tt='自来水'  	@change="bindDateChange">
				<input class="weui-input" type="number" :value="anzhuang2" placeholder="2022" />
			</picker>
			<view class="charts-box" style="height: 400px;">
				<qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},
	             {position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'}
	              ]}}" :chartData="chartsDataMix2" />
			</view>
			<view class="tlt"> 地表水用水量</view>
			<picker mode="date"  fields="year" :value="anzhuang3" start="2015-09-01" end="2025-09-01"
			data-tt='地表水' 	@change="bindDateChange">
				<input class="weui-input" type="number" :value="anzhuang3" placeholder="2022" />
			</picker>
			<view class="charts-box" style="height: 400px;">
				<qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},
	                {position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'}
	          ]}}" :chartData="chartsDataMix3" />

			</view>
		</view>
		<view class="" v-else-if=" tibj==2 ">
			<view class="tlt">地下水用水量</view>
			<picker mode="date" fields="month" :value="anzhuang" start="2015-09-01" end="2025-09-01"
				@change="bindDateChange">
				<input class="weui-input" type="number" :value="anzhuang" placeholder="2022-03" />
			</picker>

			<view class="charts-box" style="height: 400px;">
				<qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},
		            
					{position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'
					}]}}" :chartData="chartsDataMix4" />

			</view>

			<view class="tlt"> 自来水用水量</view>

			<picker mode="date" fields="month" :value="anzhuang" start="2015-09-01" end="2025-09-01"
				@change="bindDateChange">
				<input class="weui-input" type="number" :value="anzhuang" placeholder="2022-03" />
			</picker>
			<view class="charts-box" style="height: 400px;">
				<qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},
		            {position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'}
		             ]}}" :chartData="chartsDataMix5" />
			</view>
			<view class="tlt"> 地表水用水量</view>
			<picker mode="date" fields="month" :value="anzhuang" start="2015-09-01" end="2025-09-01"
				@change="bindDateChange">
				<input class="weui-input" type="number" :value="anzhuang" placeholder="2022-03" />
			</picker>
			<view class="charts-box" style="height: 400px;">
				<qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '折线'},
		               {position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'}
		         ]}}" :chartData="chartsDataMix6" />

			</view>

		</view>


		<view class="" v-else-if=" tibj==3">

			<view class="biao" v-for="i in  tobleData" :key="0" @click="xinxi(i.sb_id)">
				<view class="A">
					<view>水表号</view>
					<view>{{i.sb_num}}</view>
				</view>
				<view class="B">
					<view>用水类型</view>
					<view>{{i.sb_yongshuileixing}}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import http from '../../../utils/http.js'
	export default {
		setup() {
			let data = reactive({
				chartsDataMix6: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
							"name": "计划水量",
							"index": 1,
							"data": [
								50,
								20,
								75,
								60,
								34,
								38
							],
							"type": "column"
						},
						{
							"name": "实际水量",
							"color": '#1010b4',
							"data": [
								120,
								140,
								105,
								170,
								95,
								160
							],
							"type": "line",
							"color": "#2fc25b"
						},

					]
				},
				chartsDataMix5: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
							"name": "计划水量",
							"index": 1,
							"data": [
								50,
								20,
								75,
								60,
								34,
								38
							],
							"type": "column"
						},
						{
							"name": "实际水量",
							"color": '#1010b4',
							"data": [
								120,
								140,
								105,
								170,
								95,
								160
							],
							"type": "line",
							"color": "#2fc25b"
						},

					]
				},
				chartsDataMix4: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
							"name": "计划水量",
							"index": 1,
							"data": [
								50,
								20,
								75,
								60,
								34,
								38
							],
							"type": "column"
						},
						{
							"name": "实际水量",
							"color": '#1010b4',
							"data": [
								120,
								140,
								105,
								170,
								95,
								160
							],
							"type": "line",
							"color": "#2fc25b"
						},

					]
				},
				chartsDataMix3: {
					"categories": [
						"1月",
						"2月",
						"3月",
						"4月",
						"5月",
						"6月",
						"7月",
						"8月",
						"9月",
						"10月",
						"11月",
						"12月"
					],
					"series": [{
							"name": "计划水量",
							"index": 1,
							"data": [

							],
							"type": "column"
						},
						{
							"name": "实际水量",
							"color": '#1010b4',
							"data": [

							],
							"type": "line",
							"color": "#2fc25b"
						},

					]
				},
				chartsDataMix2: {
					"categories": [
						"1月",
						"2月",
						"3月",
						"4月",
						"5月",
						"6月",
						"7月",
						"8月",
						"9月",
						"10月",
						"11月",
						"12月"
					],
					"series": [{
							"name": "计划水量",
							"index": 1,
							"data": [

							],
							"type": "column"
						},
						{
							"name": "实际水量",
							"color": '#1010b4',
							"data": [

							],
							"type": "line",
							"color": "#2fc25b"
						},

					]
				},
				chartsDataMix1: {
					"categories": [
						"1月",
						"2月",
						"3月",
						"4月",
						"5月",
						"6月",
						"7月",
						"8月",
						"9月",
						"10月",
						"11月",
						"12月"
					],
					"series": [{
							"name": "计划水量",
							"index": 1,
							"data": [

							],
							"type": "column"
						},
						{
							"name": "实际水量",
							"color": " #1010b4",
							"data": [

							],
							"type": "line",
							"color": "#2fc25b"
						},

					]
				},
				tobleData: [],
				tibj: 1,
				anzhuang1:'',
				anzhuang2:'',
				anzhuang3:'',
				dianji(i) {
					data.tibj = i
				},
                bindDateChange: function(e) {
									console.log('picker发送选择改变，携带值为', e.detail.value , e.currentTarget.dataset.tt);
									data.anzhuang1 = e.detail.value
								     let tt=e.currentTarget.dataset.tt
									
									switch (tt) {
										case '地下水':
										data.anzhuang1 = e.detail.value;
											
											break;
										case "自来水":
											data.anzhuang2 = e.detail.value;
												
											break;
										case "地表水":
											data.anzhuang3 = e.detail.value;
												
											break;
									}
										data.a(data.anzhuang1,tt);
								},
				a(rr, tt, a, b) {
					let attr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
					let attr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
					http({
						url: "/miniwatermeter/getyiyiyue",
						method: "post",
						data: {
							yue: rr
						}
					}).then((res) => {

						for (let i of res.data.data) {
							if (i.sb_yongshuileixing == tt) {
								switch (Number(i.sb_jiaoyan.split('-')[1])) {
									case 1:
										attr1[0] += Number(i.sb_yuanbiaodushu);
										attr2[0] += Number(i.sb_xingbiaodushu);
										break;
									case 2:
										attr1[1] += Number(i.sb_yuanbiaodushu);
										attr2[1] += Number(i.sb_xingbiaodushu);
										break;
									case 3:
										attr1[2] += Number(i.sb_yuanbiaodushu);
										attr2[2] += Number(i.sb_xingbiaodushu);
										break;
									case 4:
										attr1[3] += Number(i.sb_yuanbiaodushu);
										attr2[3] += Number(i.sb_xingbiaodushu);
										break;
									case 5:
										attr1[4] += Number(i.sb_yuanbiaodushu);
										attr2[4] += Number(i.sb_xingbiaodushu);
										break;
									case 6:
										attr1[5] += Number(i.sb_yuanbiaodushu);
										attr2[5] += Number(i.sb_xingbiaodushu);
										break;
									case 7:
										attr1[6] += Number(i.sb_yuanbiaodushu);
										attr2[6] += Number(i.sb_xingbiaodushu);
										break;
									case 8:
										attr1[7] += Number(i.sb_yuanbiaodushu);
										attr2[7] += Number(i.sb_xingbiaodushu);
										break;
									case 9:
										attr1[8] += Number(i.sb_yuanbiaodushu);
										attr2[8] += Number(i.sb_xingbiaodushu);
										break;
									case 10:
										attr1[9] += Number(i.sb_yuanbiaodushu);
										attr2[9] += Number(i.sb_xingbiaodushu);
										break;
									case 11:
										attr1[10] += Number(i.sb_yuanbiaodushu);
										attr2[10] += Number(i.sb_xingbiaodushu);
										break;
									case 12:
										attr1[11] += Number(i.sb_yuanbiaodushu);
										attr2[11] += Number(i.sb_xingbiaodushu);
										break;
								}
							}
						}
						
						switch (tt) {
							case '地下水':
								data.chartsDataMix1.series[0].data = attr1;
								data.chartsDataMix1.series[1].data = attr2;
								break;
							case "自来水":
								data.chartsDataMix2.series[0].data = attr1;
								data.chartsDataMix2.series[1].data = attr2;
								break;
							case "地表水":
								data.chartsDataMix3.series[0].data = attr1;
								data.chartsDataMix3.series[1].data = attr2;
								break;
						}



					})
				}


			});



			onMounted(() => {
				data.a('2022', '地下水')
				data.a('2022', '自来水')
				data.a('2022', '地表水')
				http({
					url: "/miniwatermeter/getReplace",
					method: "get",

				}).then((res) => {

					data.tobleData = res.data.data
				})
			})



			return {
				...toRefs(data)
				// ,tobleData
			};

		},

		onLoad() {



		},
		methods: {
			fanhui: function() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>

<style>
	@import url("~@/static/xzafont/font/iconfont.css");

	.weui-input {
		margin: 30rpx;
		width: 200rpx;
		border: 1rpx solid #E4E4E4;
	}

	.header .icon-fanhui {
		font-size: 35rpx;
	}

	.box {
		font-size: 35rpx;
	}

	.header {
		display: flex;
		/* justify-content: space-between; */
		/* background-color: #FFFFFF; */
		line-height: 90rpx;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #F8F8F8;
	}

	.header view:last-child {

		margin: auto;
	}

	.ddd {
		display: flex;
	}

	.ddd view {
		margin: 20rpx;
	}

	.active {
		color: #1890FF;
		border-bottom: 1px solid #1890FF;
	}

	.biao {
		border: 1rpx solid #F8F8F8;
		margin-top: 10rpx;
		padding: 20rpx 0;
	}

	.A,
	.B,
	.C {
		display: flex;
		flex-wrap: nowrap;
		padding: 5rpx 15rpx;
	}

	.A>view:nth-child(1),
	.B>view:nth-child(1),
	.C>view:nth-child(1) {
		width: 300rpx;
	}

	.A>view:nth-child(2),
	.B>view:nth-child(2),
	.C>view:nth-child(2) {
		color: #666666;
	}

	.tlt {
		padding: 20rpx;
		font-size: 35rpx;
		border-bottom: 1px solid #b6b6b6;
	}
</style>
